<template>
  <div class="details">
      <!-- 头部标题组件-->
      <edit-title>
         <template #mytitle>查看客户详情</template>
      </edit-title>
      <!-- 查看客户信息 -->
      <div class="titleT">
          客户信息 
          <span class="ok" @click="isshowFn()">收起</span>
          <!-- 信息组件 -->
          <el-button type="primary" size="medium" @click="goedit()">编辑</el-button>
          <el-button type="primary" size="medium">信息修改记录</el-button>
          <el-button type="warning" size="medium">合作终止</el-button>
      </div>

      <!-- 收起二级菜单 -->
      <div class="nonelist" v-show="isshow">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="客户编码" prop="id">
                <el-input v-model="ruleForm.id"></el-input>
            </el-form-item>
            <el-form-item label="客户所属业务区" prop="myaddress">
                <el-input v-model="ruleForm.myaddress"></el-input>
            </el-form-item>
            <el-form-item label="客户地址" prop="address">
                <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="客户名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="客户联系人" prop="people">
                <el-input v-model="ruleForm.people"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="客户类型" prop="region">
              <el-select v-model="ruleForm.region" placeholder="顺丰速运">
                <el-option label="顺丰速运" value="shanghai"></el-option>
                <el-option label="龙邦速运" value="beijing"></el-option>
                <el-option label="中通快递" value="beijing"></el-option>
                <el-option label="申通快递" value="beijing"></el-option>
                <el-option label="中国邮政" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户联系方式" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
      </el-form>
      </div>
      <!-- 分割线 -->
      <div class="only"></div>
      <!-- 外派员工清单 -->
      <div class="titleT">外派员工清单 <span class="peoplenum">外派人数: 2</span></div>
      <!--输入框 -->
     <div class="iflist">
        <div class="input-suffix">
            员工姓名:<el-input size="small" placeholder="请输入" prefix-icon="el-icon-search" v-model="input1"></el-input>
            客户工号:<el-input size="small"  placeholder="请输入" prefix-icon="el-icon-search" v-model="input2"></el-input>
            职位:<el-input size="small"  placeholder="请输入" prefix-icon="el-icon-search" v-model="input3"></el-input>
            服务时间段:<el-date-picker size="small"  style="width:300px" v-model="value1" type="daterange" range-separator="至" start-placeholder="请选择" end-placeholder="请选择"></el-date-picker>
            <!--搜索 -->
            <el-button type="primary" size="medium">搜索</el-button>
      </div>
    </div>
    <!-- 员工信息 -->
    <div class="contentlist">
        <el-table :data="tableData" border style="width: 90%;margin: 0px 3%;">
            <el-table-column prop="id" label="序号" width="90"></el-table-column>
            <el-table-column prop="name" label="员工姓名" width="160"></el-table-column>
            <el-table-column prop="number" label="客户工号" width="160"></el-table-column>
            <el-table-column prop="jop" label="职位" width="160"></el-table-column>
            <el-table-column prop="time" label="服务开始时间" width="270"></el-table-column>
            <el-table-column prop="stoptime" label="服务结束时间" width="270"></el-table-column>
            <el-table-column prop="now" label="用工状态"></el-table-column>
        </el-table>
    </div>
  </div>
</template>

<script>
import myhead from '../../../components/myhead.vue'
import EditTitle from '../edit/edit-title.vue'
export default {
  components: { myhead, EditTitle},
  data(){
    return{
        isshow:true,
        ruleForm: {
          id:'C10000001',
          name: '速运深圳区',
          region: '顺丰速运',
          myaddress:'C10000001',
          people:'张三',
          phone:'12345678901',
          address:'深圳市福田区xx街道xx大厦',
          delivery: false,
        }, 
         rules: {
          id: [{ required: true}],
          name: [{ required: true}],
          region: [{ required: true}],
          myaddress: [{ required: true}],
          address: [{ required: true}],
        },
      input1: '',
      input2: '',
      input3:'',
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
         tableData: [{id:1, name:'李明明', number:'A0534555', jop:'销售员', time:'2017-01-23', stoptime:'2019-12-23', now:'在职'},
                     {id:2, name:'李明明',number:'A0534555',jop:'销售员',time:'2017-01-23',stoptime:'2019-12-23',now:'在职'}]
    }
  },
  methods:{
    // 收起方法
    isshowFn(){
        // v-show控制显示隐藏进行收起操作，多次用
        this.isshow=!this.isshow
    },
     // 点击编辑进行客户编辑
      goedit(){
          this.$router.push({path:'/edit'})
      },
  }
}
</script>

<style lang="less" scoped>
.details{
  .only{
    height: 20px;
    background-color:#eeeef0;
  }
  background-color: #fff;
     /deep/.el-table .cell{
       text-align: center;
     }
    /deep/.el-table th>.cell{
      text-align: center;
    }
     /deep/.el-table th{
      background-color:#fafaff;
      color:rgb(107, 103, 103);
    }
    .titleT{
        font-weight: bold;
        margin:30px 0 30px 20px;
        padding-left: 15px;
        border-left: 4pX solid #409eff;
        .peoplenum{
          font-size: 13px;
          padding-left:87%;
          position: relative;
          right: 40px;
         
        }
        .ok{
          padding-left:20px;
          font-size: 14px;
          //  font-weight: 300;
          text-decoration: underline;
          color:#858585;
          margin-right: 65%;
        }
    }
    // 外派员工
    .iflist{
        // font-weight:600;
        display: flex;
        margin: 35px auto 25px auto;
        padding-left: 32px;
        font-size: 14px;
        button{
          margin-left: 20px;
        }
        /deep/.el-input__inner{
            width: 180px;
            margin-left: 5px;
        }
        /deep/.el-input{
            width:auto ;
            margin-right:25px;
            font-size: 14px;
        } 
    }
    // 收起的二级菜单
    .nonelist{
        // font-weight: bold;
        width:80%;
        margin:20px 9%;
        display: flex;
        /deep/.el-input__inner{
            height: 35px;
            background-color: #fafaff;
        }
        /deep/.el-form-item__label{
            color: black;
            line-height:normal;
        }
        /deep/.el-form-item__content{
            width: 68%;
            color: black;
            margin-right: 80px;
        }
    }  
}  
</style>